

<style>
    .taskShow-content {
        margin-bottom: 0px;
        background-color: #DEE9F5;
        font-size: 12px;
        min-height: 435px;
    }
    .taskShow-content .taskShow-card {
        margin-bottom: 0px;
        background-color: #DEE9F5;
        border-bottom: 1px solid #D2D2D2;
    }
    .taskShow-card .blockTitle {
        color: #296ECA;
        padding-left: 35px;
    }
    .taskShow-card .blockTitle .title-icon {
        width: 18px;
        height: 18px;
        line-height: 12px;
        left: 15px;
        color: #5DC5DC;
    }
    .taskShow-card .title-more {
        float: right;
        cursor: pointer;
    }
    .taskShow-card .table-content {
        width: 100%;
        height: 368px;
    }
    .taskShow-card .task-item {
        display: inline-block;
        width: 158px;
        height: 87px;
        background-color: #EDF4FA;
        box-shadow: 0px 5px 8px 0px rgba(0,0,0,0.5);
        cursor: pointer;
    }
    .taskShow-card .left-icon {
        float: left;
        width: 56px;
        height: 100%;
        background: url('../../../dist/style/res/index/task.png') no-repeat center center;
        background-size: 35px 44px;
    }
    .taskShow-card .right-content {
        float: left;
        width: 100px;
        height: 100%;
    }
    .taskShow-card .right-content .title {
        height: 25px;
        width: 100%;
        line-height: 25px;
        text-align: left;
        font-size: 12px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .taskShow-card .right-content .form {
        width: 100%;
        height: 60px;
    }
    .taskShow-card .right-content .form-title {
        height: 18px;
        line-height: 18px;
    }
    .taskShow-card .right-content .form-content {
        height: 42px;
        width: 100%;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .taskShow-card .right-content .form-content p {
        height: 18px;
        line-height: 18px;
    }
    .taskShow-card .c-go-task {
        line-height: 85px;
        text-align: center;
    }
</style>
<div class="taskShow-content">
    <div class="layui-card taskShow-card">
        <div class="layui-card-header blockTitle">
            <i class="layui-icon layui-icon-form title-icon"></i>
            任务展示
            <span class="title-more T-checkTask" data-target="more">MORE</span>
        </div>
        <div class="layui-card-body">
            <div class="table-content" id="i-tasks-cards">
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="taskShowEmergengcyTpl">
    {{#  if(!!d.tasks && d.tasks.length && d.tasks.length > 0){
        $.each(d.tasks, function(index, item) {
    }}
        <div class="task-item T-checkTask" data-target="detail" data-id="{{item.id}}">
            <div class="left-icon"></div>
            <div class="right-content">
                <div class="title" lay-tips="{{item.taskname}}">{{item.taskname}}</div>
                <div class="form">
                    <div class="form-title">表单：</div>
                    <div class="form-content">
                        {{# 
                            $.each(item.formMsg, function(jndex, jtem) {
                        }}
                            <p lay-tips="{{jtem.formname}}">{{jtem.formname}}</p>
                        {{#
                            })
                        }}
                    </div>
                </div>
            </div>
        </div>
    {{#  
        })
        }
    }}
    <div class="task-item T-checkTask" data-target="crCZ">
        <div class="left-icon"></div>
        <div class="right-content c-go-task">
            创建常驻任务
        </div>
    </div>
    <div class="task-item T-checkTask" data-target="crLS">
        <div class="left-icon"></div>
        <div class="right-content c-go-task">
            创建临时任务
        </div>
    </div>
</script>
<script>
layui.use(['admin'], function(){
    var $ = layui.$,
    admin = layui.admin,
    router = layui.router(),
    laytpl = layui.laytpl;

    admin.req({
        type:"get",
        url: 'myapi/DC/api/rest/web/custom/Resident?model=select&page='+1+'&count='+10,
        success: function(res){
            if(res.data.data) {
                var tasks = res.data.data.length ? res.data.data : [],
                showTasks = tasks.length > 6 ? tasks.slice(0,6) : tasks;
                var getTpl = taskShowEmergengcyTpl.innerHTML;
                var viewHtml = document.getElementById('i-tasks-cards');
                laytpl(getTpl).render({tasks: showTasks}, function(html){
                    viewHtml.innerHTML = html;
                });
            };
        }
    });

    $('.taskShow-content').on('click', '.T-checkTask', function(){
        var target = $(this).data('target');
        switch(target) {
            case 'detail':
                var id = $(this).data('id');
                location.hash = '/task/permanent/index/isEdit=1/id='+id;
            break;
            case 'crCZ':
            location.hash = '/task/permanent/index/isCreate=1';
            break;
            case 'crLS':
            location.hash = '/task/temporary/index/isCreate=1';
            break;
            case 'more':
            location.hash = '/task/permanent/';
            /* layer.open({
                id: 'taskshow-alldata-tableHtml',
                title:'常驻任务',
                offset: '20px',
                type: 1,
                shadeClose: true,
                area: ['600px', '600px'],
                success: function(lay) {
                    view(this.id).render('./IndexPage/components/taskShowTable',{list: tasks});
                }
            }); */
            break;
            default:
            break;
        }
    })

});
</script>